<template>
  <div class="data-info">
  	<div class="shadow-card">
  		<div class="s-card-head data-info-s-card-head">
  			<span class="s-card-head-text">行业对比</span>
			<span class="s-card-head-date">评估时间：{{ dataTime }}</span>
  			<!-- <i class="s-card-head-icon" @click="showMsg('按证监会二级分类，\n所属行业为'+industry)">
  				<img src="../assets/info.png">
  			</i> -->
  		</div>

  		<div class="s-card-body" style="position: relative;">
			<div class="industry-wrap">{{ industry }}</div>
  			<div class="chart-wrapper" style="height:260px">
  				<canvas :id="radarId" style="width:100%;height:calc(100% - 30px)"></canvas>
  			</div>

  			<div class="score-text">
  				<div class="score-text-cell">
  					<p class="score-text-item">{{ companyName }}:</p>
  					<p class="score-text-num">{{ complexScore[0] }}<font class="small-font">分</font></p>
  				</div>

  				<div class="score-text-cell">
  					<p class="score-text-item">行业均值:</p>
  					<p class="score-text-num">{{ complexScore[1] }}<font class="small-font">分</font></p>
  				</div>
  			</div>
  		</div>
  	</div>

		<div class="content">
		  <van-tabs v-model="active" :line-width ='32' title-active-color="#D4B686" sticky>
		    <van-tab>
		    	<div slot="title">
			      经营绩效
			    </div>
		      <BusinessPerformance :companyName="companyName"/>
		    </van-tab>
		    <van-tab title="舆论形象">
		      <OpinionImage/>
		    </van-tab>
		    <van-tab title="监管合规">
		      <RegulatoryCompliance/>
		    </van-tab>
		    <van-tab title="市场波动">
		      <MarketFluctuation/>
		    </van-tab>
		  </van-tabs>
		</div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Tab, Tabs } from 'vant';
import BusinessPerformance from '@/views/DataChildPage/BusinessPerformance';
import OpinionImage from '@/views/DataChildPage/OpinionImage';
import RegulatoryCompliance from '@/views/DataChildPage/RegulatoryCompliance';
import MarketFluctuation from '@/views/DataChildPage/MarketFluctuation';
import { enums } from '@/core/config';
import router from '@/router';
import { Dialog} from 'vant';

Vue.use(Dialog);

const jumpLoginPage = () => {
  router.push({ name: 'login' })
}
import { getRadar, getCompanyInfo } from '@/api/data';

// Vue.use(Row).use(Col);
export default {
  name: 'DataInfo',
  components: {
    BusinessPerformance,
    OpinionImage,
    RegulatoryCompliance,
    MarketFluctuation
  },
  data() { 
    return {
      title: '预警',
      radarId: 'radarChart',
      active: 0,
      complexScore:['--','--'],
      companyName:'',
	  industry:'',
	  dataTime: ''
    };
  },
  created() {
  	this.$store.commit('set_top_title',this.title);
  },
  mounted() {
    this.drawMainRadar();
    getCompanyInfo().then(res => {
    	if(res.code === 0){
    		this.companyName = res.data.stock_name;
    		this.industry = res.data.industry
    	}
		
	});
	
	
  },
  methods: {
  	showMsg: function(text){
  		Dialog.alert({
		  title: '提示',
		  message: text,
		  className:'my-dialog',
		  confirmButtonText:'我知道了'
		}).then(() => {
		  // on close
		});
  	},
  	getInfoIcon(){
		return require("../assets/info.png");
	},
    drawMainRadar() {
    	getRadar().then((res) => {
			// console.log(res);
			this.dataTime = res.data.time;
    		let data = [{},{},{},{}];
    		let nameArr = ['合规','经营','形象','市场'];
    		let engNameArr = ['compliance','manage','opinion','market'];
			let dataOri = res.data.own.slice(0);
    		this.complexScore = res.data.third;
			dataOri.forEach(obj => {
				if(obj.category!='complex'){
					let _ind = engNameArr.indexOf(obj.category);
					data[_ind] = {
	    				item: nameArr[_ind],
	    				user: '本公司',
	    				score: obj.own,
	    				content: obj.content
	    			}
				}
			});

			dataOri.forEach(obj => {
				if(obj.category!='complex'){
					data.push({
	    				item: nameArr[engNameArr.indexOf(obj.category)],
	    				user: '行业均值',
	    				score: obj.industry
	    			})
				}
			});

    		const chart = new this.$F2.Chart({
		        id: this.radarId,
		        padding: [20, 0, 20, 0],
		        appendPadding: 0,
		        // width: 300,
		        // height: 300 * 0.64,
		        pixelRatio: window.devicePixelRatio // 指定分辨率
		    });

		    chart.coord('polar');
		    chart.tooltip(false);
			chart.source(data, {
			    score: {
			        min: 0,
			        max: 100,
			        nice: false,
			        tickCount: 6
			    }
			});

			chart.legend({
			    position : 'right',
			    verticalAlign: 'top',
    			marker:'square',
    			offsetY:1,
    			offsetX:-20
			});
			chart.axis('item', {
			    grid: {
			        lineDash: null,
			        top: true
			    },
			    label: null
			});
			chart.axis('score', {
			    grid: {
			        lineDash: 3,
			        top: false,
			        stroke:'#E7DFD2'
			    },
			    label: null
			});
			
			
			chart.line().position('item*score').color('user',['#C392FF','#669CFF']).animate({
			    appear: {
			    	animation: 'groupWaveIn'
			    }
			});

			chart.area().position('item*score').color('user',['#C392FF','#669CFF']).style({
		    fillOpacity: 0.3
		  }).animate({
			    appear: {
			        animation: 'groupWaveIn'
			    }
			});

			chart.point().position('item*score').color('user',['#C392FF','#669CFF']).style({
			    lineWidth: 1,
			    fill: '#fff'
			});
			let _data = data.slice(0,4);

			// console.log(this);
			_data.map((obj,ind) => {
				
				let classGroup=['comp-iMsg','manage-iMsg','market-iMsg','opinion-iMsg'];
				chart.guide().html({
					position: [obj.item, 123],
					html:`<div class="radar-msg-label ${classGroup[ind]}">${obj.item}<div class="msg-tips">${obj.content}</div><i class="s-card-head-icon small-card-head-icon" style="display:inline-block;vertical-align:middle;">
  				<img src="${this.getInfoIcon()}">
  			</i></div>`
				});
			});
			// chart.point().position('item*score').color('user').style({
			//   stroke: '#fff',
			//   lineWidth: 1
			// }).animate({
			//   appear: {
			//     delay: 300
			//   }
			// });

		    chart.render();

		    let radarTips = document.querySelectorAll('.radar-msg-label');
			// console.log(radarTips);
			document.addEventListener("touchstart",function(ev){
		        radarTips.forEach(obj => {
		        	obj.classList.remove('active-view-msg');
		        });
		    });
		    radarTips.forEach(obj => {
		    	// console.log(obj);
		    	obj.addEventListener("click",function(event){
		    		obj.classList.toggle('active-view-msg');
			        event=event||window.event;
			        event.stopPropagation();
			    });
		    });
		    // myDiv.addEventListener("click",function(event){
		    //     event=event||window.event;
		    //     event.stopPropagation();
		    // });
    	});

	    
    }
  }
};
</script>

<style>
.data-info-s-card-head{
	display: flex;
	justify-content: space-between;
}
.data-info-s-card-head .s-card-head-date{
	font-size:12px;
	color:#BCBCBC;
}
.industry-wrap{
	background-color:#FAF4E9;
	color:#C29854;
	font-size:12px;
	margin:10px 9px 5px;
	padding:8px 9px;
	text-align: left;
}
.data-info{
  padding:0 0 50px;
}
.my-dialog{
	/* width:65%!important; */
}
.data-info .content{
	padding: 0;
}
.data-info [class*=van-hairline]::after{
	border-top:0;
}
.shadow-card {
	-webkit-box-shadow: 0 0 11px 4px rgba(0,0,0,0.05);
    box-shadow: 0 0 11px 4px rgba(0,0,0,0.05);
    border-radius: 10px;
    margin-bottom: 8px;
    margin:10px 14px 8px;
}
.s-card-head {
	height:52px;
	border-bottom:1px solid #EAEAEA;
	padding:0 18px;
	box-sizing: border-box;
	line-height: 52px;
	text-align: left;
	display: flex;
	align-items: center;
}
.s-card-head .s-card-head-text{
	font-size:18px;
	color:#222;
	font-weight: bold;
	margin-right: 14px;
}
i.s-card-head-icon{
	width:15px;
	height: 15px;
	font-size: 0;
	line-height: 0;
}
i.s-card-head-icon.small-card-head-icon{
	width:12px;
	height: 12px;
}
i.s-card-head-icon img{
	width:100%;
	height:100%;
}
.chart-wrapper{
	padding:20px 0;
}
.common-wrap {
	background-color: #fff;
	border-bottom:5px solid #EAEAEA;
	padding:0 15px;
	box-sizing: border-box;
	text-align: left;
}
.common-wrap .common-wrap-head{
	height: 50px;
	border-bottom:1px solid #EAEAEA;
	position: relative;
	line-height: 50px;
	box-sizing: border-box;
	font-size: 16px;
	color:#222;
	font-weight: bold;
	padding-left:9px;
}
.common-wrap .common-wrap-head:before{
	content:'';
	width: 3px;
	height: 13px;
	background-color: #D4B686;
	position: absolute;
	left:0;
	top:50%;
	margin-top:-6.5px;
}
.common-wrap-body {
	padding:30px 0 20px;
}
.vio-rate-box{
    width: 100%;
    height: auto;
    overflow:hidden;
}
.vio-rate-wrap{
    width:200%;
    display: flex;
    transform: translateX(0);
    transition: all .5s;

}
.vio-rate-wrap.vio-rate-view-right{
    transform: translateX(-50%);
}
.vio-rate-cell{
    flex:1;
}
.self-tab-cell{
	font-size:15px;
	color:#757679;
	position: relative;
	font-weight: normal;
	margin:0 4px;
}
.self-tab-cell.active-tab-cell{
	color:#D4B686;
}
.self-tab-cell.active-tab-cell:before{
	content:'';
	position: absolute;
	width:27px;
	height: 3px;
	background-color: #D4B686;
	bottom:0;
	left:50%;
	margin-left: -13.5px;
}
.score-text{
	width: 100%;
	position: absolute;
	bottom:0;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	padding:0 30px 10px;
}
.score-text-item{
	font-size:12px;
	color: #757679;
	text-align: left;
	margin:0;
}
.score-text-num{
	font-size:22px;
	color: #D4B686;
	text-align: left;
	margin:0;
}
.score-text-num .small-font{
	font-size:17px;
}
.radar-msg-label{
	width:44px;
	font-size:14px;
	z-index:999;
}
.msg-tips{
	background-color: rgba(0,0,0,0.6);
	border-radius: 4px;
	color:#fff;
	position: absolute;
	padding:3px;
	width: 250px;
	text-align: left;
	display: none;
	z-index:9;
}
.radar-msg-label.active-view-msg .small-card-head-icon:before,.radar-msg-label.active-view-msg .msg-tips{
	display: block;
}
.small-card-head-icon{
	position: relative;
}
.small-card-head-icon:before{
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-bottom: 6px solid rgba(0,0,0,0.6);
	top:6px;
	display: none;
}
.comp-iMsg .small-card-head-icon:before{
	border: 6px solid transparent;
	border-top: 6px solid rgba(0,0,0,0.6);
	top:-11px;
}
.market-iMsg .small-card-head-icon:before{
	top:8px;
}
.comp-iMsg .msg-tips{
	top:-50px;
	left:50%;
	margin-left:-125px;
}
.manage-iMsg .msg-tips{
	right:-30px;
	bottom:-67px
}
.market-iMsg .msg-tips{
	left:50%;
	margin-left:-125px;
	bottom:-50px;
}
.opinion-iMsg .msg-tips{
	left:-30px;
	bottom:-48px;
}
</style>